<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/AccidentRecordShow">事故记录管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>新增事故记录</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="事故标题:" prop="accidentTitle">
            <el-input v-model="form.accidentTitle" placeholder="请输入事故标题" />
        </el-form-item>
        <el-form-item label="车牌号:" style="width: 600px;" prop="licensePlateNumber">
            <el-select v-model="form.licensePlateNumber" placeholder="请输入车牌号" clearable>
                <el-option v-for="item in licensePlateNumberlist" :label="item" :value="item" :key="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="事发人:" prop="incidentPerson">
            <el-input v-model="form.incidentPerson" placeholder="请输入事发人" />
        </el-form-item>
        <el-form-item label="事故日期:" prop="accidentDate">
                <el-date-picker v-model="form.accidentDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择事故日期"
                    style="width: 100%" />
        </el-form-item>
        <el-form-item label="保险公司赔偿:" prop="costManagementPrice">
            <el-input v-model="form.insuranceIndemnify" placeholder="请输入保险公司赔偿" />
        </el-form-item>
        <el-form-item label="公司净损失:" prop="costManagementAmount">
            <el-input v-model="form.companyLosses" placeholder="请输入公司净损失" />
        </el-form-item>
        <el-form-item label="事故描述:" prop="accidentDesc">
            <el-input v-model="form.accidentDesc" type="textarea" placeholder="请输入事故描述" />
        </el-form-item>
        <el-form-item label="直接紧急损失:" prop="economicLoss">
            <el-input v-model="form.economicLoss" type="textarea" placeholder="请输入直接紧急损失" />
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.accidentRemark" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button @click="router.push('AccidentRecordShow')">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const route = useRoute()
const show1 = ref(false)
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除  
    accidentId: 0,          // 事故记录id
    companyID: "",          // 公司id
    user_Id: 0,  // 用户id
    accidentTitle: "",  // 事故标题
    licensePlateNumber: "",  // 车牌号
    incidentPerson: "",  // 事故人员
    accidentDate: "",           // 事故日期
    insuranceIndemnify: '',     // 保险公司赔偿
    companyLosses: '',         // 公司损失
    accidentDesc: "",   // 事故描述
    economicLoss: "",     // 经济损失
    accidentRemark: ""  // 事故备注
})

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    accidentTitle: [
        { required: true, message: '事故标题不能为空', trigger: 'blur' },
    ],
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
    ],
    incidentPerson: [
        { required: true, message: '事发人不能为空', trigger: 'blur' },
    ],
    accidentDate: [
        { required: true, message: '事故日期不能为空', trigger: 'blur' },
    ],
    accidentDesc: [
        { required: true, message: '事故描述不能为空', trigger: 'blur' },
    ],
})
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            axios.post('/carwrite/api/AccidentRecord/Create', form)
                .then(res => {
                    if (res.data.code == 0) {
                        ElMessage.success('添加成功');
                        router.push('AccidentRecordShow')
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//获取车牌号
const licensePlateNumberlist= ref([])
const showNumber=()=>{
    axios.get("/carread/api/Main/GetCar")
    .then(res=>{
        licensePlateNumberlist.value=res.data.data.map((x:any)=>x.plateNumber)
        console.log(licensePlateNumberlist.value);
    })
    .catch(err=>{
      console.log(err);  
    })
}

onMounted(() => {
    showNumber();
})
</script>